<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<main>
  <div
    class="tp-breadcrumb__area fix tp-breadcrumb-height"
    style="background-image: url('../../../../assets/svg/breadcrumb.svg');height: 250px"
  >
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="tp-breadcrumb__content text-center z-index-5">
            <div class="tp-breadcrumb__list">
              <span><a href="index.html">Apache </a></span>
              <span class="dvdr">.</span>
              <span>HertzBeat</span>
            </div>
            <h3 class="tp-breadcrumb__title"
              ><span class="p-relative z-index-5">
                模版
                <span class="tp-title-shape">
                  <svg width="233" height="5" viewBox="0 0 233 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M229.237 2.64045C229.948 2.63606 231.134 2.60076 231.845 2.6523C230.66 2.65963 229.474 2.69493 228.526 2.70079C228.052 2.75967 229.238 2.78031 229.712 2.80535C230.661 2.79949 231.609 2.79363 232.321 2.84517C231.61 2.87754 230.661 2.8834 229.713 2.88927C228.764 2.89513 227.579 2.87449 226.868 2.93483C227.579 2.9584 227.579 2.9584 227.579 3.01434C225.92 3.05258 225.921 3.2204 223.312 3.18058C222.364 3.18645 221.415 3.19231 220.467 3.19817C219.282 3.31739 217.86 3.43807 214.777 3.40118C213.829 3.43501 212.88 3.44088 211.932 3.41877C209.324 3.49083 206.715 3.47899 204.107 3.52308C203.87 3.55252 203.633 3.55398 203.396 3.52748C202.448 3.53334 201.499 3.5392 200.551 3.54507L200.314 3.54653L200.076 3.548C199.128 3.55386 198.417 3.58623 197.468 3.56412C194.149 3.58464 190.592 3.60663 187.272 3.65512C185.138 3.66831 183.478 3.6506 182.292 3.57401L182.055 3.57548L181.818 3.57694C181.107 3.63728 181.345 3.71973 178.974 3.73439C176.602 3.72108 174.231 3.73573 171.623 3.75186C169.963 3.73415 168.303 3.80035 166.644 3.78264C160.715 3.79131 154.788 3.82795 148.86 3.83662C143.643 3.86887 138.426 3.87314 133.21 3.87742C131.313 3.94509 129.416 3.90087 127.756 3.91113C118.271 3.94179 108.55 4.00188 99.0646 3.9766C94.7964 3.97501 90.5285 4.02936 86.2601 3.9998C82.4663 4.02326 78.9094 4.01727 75.1154 4.01275C66.3418 4.01104 57.5683 4.00933 49.0315 3.95021C45.4748 3.97219 42.155 3.96474 39.072 3.89988C34.0926 3.93066 29.3498 3.87606 24.8441 3.82C24.1328 3.82439 23.6584 3.79935 23.1842 3.80229C21.2874 3.84198 19.8644 3.79483 18.2042 3.74915C17.0187 3.75648 16.07 3.73437 15.3585 3.7108C14.647 3.68722 13.9357 3.69162 13.2241 3.66805C12.5125 3.6165 11.3269 3.62383 10.1413 3.63116C8.24405 3.58694 5.87274 3.57363 5.39765 3.4367C1.84077 3.43071 0.891628 3.32469 1.12788 3.18337C-0.295844 3.02433 -0.0597648 2.85504 1.12477 2.67988C1.12425 2.59597 1.12373 2.51205 1.12321 2.42814L1.12304 2.40017C0.647594 2.2073 3.2548 2.02334 2.54243 1.85991C2.30444 1.72152 3.72644 1.60084 4.6742 1.48309C4.67403 1.45512 4.67368 1.39918 5.62198 1.36534C5.85891 1.33591 6.5701 1.30354 7.51838 1.2697C8.70326 1.15049 10.1254 1.05778 12.4964 1.01515C12.9702 0.956276 13.9189 0.978385 14.6302 0.973987C15.3414 0.941619 16.0526 0.90925 16.7637 0.876881C17.4749 0.844513 18.1862 0.840116 18.8976 0.835718C21.7426 0.762187 24.5878 0.716626 27.6703 0.697572C28.8559 0.690243 29.8043 0.68438 30.9899 0.677052C31.4641 0.67412 32.1754 0.669723 32.6495 0.63882C39.0516 0.599246 45.6908 0.558205 52.0931 0.546602C55.4127 0.526082 58.7321 0.47759 62.0522 0.540985C64.8975 0.523396 68.2168 0.446933 71.2998 0.511793C72.0111 0.507395 72.7225 0.502998 73.1967 0.500067C75.3306 0.458904 77.2275 0.447178 79.3617 0.461958C84.5782 0.429712 89.7949 0.425438 94.7744 0.422629C96.4342 0.412369 98.331 0.372671 99.754 0.41982C100.703 0.441929 101.651 0.436066 102.599 0.402231C105.682 0.383177 108.764 0.364122 111.847 0.373039C112.321 0.370108 112.795 0.367177 113.27 0.364245C114.455 0.384888 115.878 0.348122 117.064 0.368765C118.723 0.358505 120.62 0.346779 122.28 0.336519C123.703 0.327725 125.363 0.317465 126.548 0.338107C127.497 0.332244 128.445 0.326382 129.394 0.320519C131.291 0.308793 133.425 0.26763 135.322 0.311847C138.879 0.289861 142.435 0.295847 145.755 0.275326C151.446 0.240149 157.137 0.260915 162.828 0.253709C164.725 0.241983 166.384 0.231723 168.282 0.247968C166.622 0.258229 164.725 0.269954 163.065 0.280214C164.725 0.241983 166.622 0.230257 168.282 0.247968C171.364 0.228914 174.209 0.211325 177.055 0.24968C178.241 0.242351 179.426 0.235022 180.612 0.255665C180.849 0.254199 181.086 0.252734 181.323 0.251268C183.932 0.235145 186.54 0.246993 189.149 0.286814C191.52 0.272156 193.654 0.314908 195.788 0.329688C196.974 0.322359 198.159 0.31503 199.345 0.363645C201.48 0.378425 203.377 0.39467 204.089 0.474188C205.511 0.40945 206.46 0.45953 207.645 0.480173C208.831 0.528788 208.358 0.615634 209.781 0.662782C209.069 0.667179 208.358 0.671577 207.647 0.675974C207.884 0.70248 208.121 0.728985 208.358 0.72752C210.018 0.773202 211.678 0.790914 213.338 0.808625C213.576 0.80716 213.813 0.805694 214.05 0.804228C215.71 0.793968 217.606 0.754271 219.029 0.801419L219.266 0.799954C219.266 0.799954 219.267 0.827925 219.029 0.829391C218.081 0.835254 217.133 0.841117 216.421 0.845514L216.184 0.84698C217.369 0.811679 218.318 0.805817 219.029 0.829391C219.504 0.938345 218.082 0.975111 217.608 1.03399C217.845 1.06049 216.66 1.09579 217.609 1.1179C218.32 1.1135 219.505 1.0782 219.268 1.13561C219.032 1.19302 217.609 1.17384 216.898 1.17824C216.66 1.17971 216.423 1.20914 216.186 1.21061C218.084 1.2828 219.981 1.29904 221.878 1.34326C224.723 1.32567 225.91 1.43023 227.57 1.50388C228.044 1.52892 228.756 1.49655 228.993 1.52306C227.57 1.53186 228.282 1.61137 227.334 1.64521C224.015 1.72167 224.015 1.80558 227.098 1.89842C228.047 1.92052 229.944 1.93677 230.419 2.01775C230.419 2.04572 230.419 2.0737 230.419 2.0737C230.893 2.07076 231.368 2.06783 231.368 2.0958C231.131 2.15321 230.419 2.12964 229.708 2.13404C229.234 2.13697 228.523 2.14137 228.286 2.1708C228.76 2.25179 228.523 2.28122 227.101 2.29002C227.575 2.34303 228.998 2.30626 228.761 2.39164C229.473 2.38725 229.947 2.41229 230.658 2.40789C229.947 2.46823 228.524 2.42108 228.287 2.47849C228.999 2.53003 228.999 2.55801 227.814 2.53736C226.865 2.54323 225.679 2.52258 226.865 2.59917C227.577 2.59477 228.525 2.58891 229.237 2.64045ZM6.81321 2.28107C6.57609 2.28254 6.57612 2.28254 6.57629 2.31051C6.57612 2.28254 6.81321 2.28107 6.81321 2.28107ZM66.5686 2.33128C66.8059 2.35779 66.8057 2.32982 67.0428 2.32835C66.8057 2.32982 66.5686 2.33128 66.5686 2.33128ZM96.2104 2.56764C95.9733 2.56911 95.9733 2.56911 96.2104 2.56764V2.56764ZM76.2909 2.38307C76.2908 2.3551 76.2908 2.3551 76.2909 2.38307V2.38307ZM65.1499 2.98342C64.9128 2.98489 64.9128 2.98489 64.6755 2.95838C64.6755 2.95838 64.4384 2.95985 64.4385 2.98782C64.6757 2.98635 64.9128 2.98489 65.1499 2.98342ZM38.828 2.78249C39.0649 2.75305 38.8278 2.75452 38.828 2.78249V2.78249ZM77.2442 3.16041C77.4814 3.15895 77.4814 3.15895 77.2442 3.16041V3.16041ZM72.5015 3.10581C72.2643 3.10728 72.2645 3.13525 71.7903 3.13818C72.0272 3.10874 72.2643 3.10728 72.5015 3.10581ZM27.4465 2.85284C27.4467 2.88081 27.4467 2.88081 27.4465 2.85284V2.85284ZM174.691 1.3832C174.691 1.3832 174.691 1.35523 174.454 1.38466C174.454 1.38466 174.454 1.38466 174.217 1.38613C174.454 1.38466 174.454 1.38466 174.691 1.3832ZM193.903 2.27145C193.903 2.24348 194.14 2.24201 194.14 2.21404C193.666 2.24494 193.666 2.24494 193.903 2.27145ZM138.421 3.00603C138.421 3.00603 138.184 3.00749 138.184 3.03547C138.421 3.034 138.895 3.03107 139.133 3.0296C138.895 3.0031 138.658 3.00456 138.421 3.00603ZM153.35 1.34728C153.349 1.31931 153.349 1.31931 153.35 1.34728C153.349 1.31931 153.112 1.32078 153.35 1.34728ZM189.393 1.51609C189.63 1.51463 189.63 1.51463 189.393 1.51609C189.63 1.48666 189.867 1.48519 189.867 1.45722C189.63 1.45868 189.393 1.46015 189.156 1.46162C189.393 1.48812 189.393 1.48812 189.393 1.51609ZM186.782 1.0567C186.545 1.08614 186.545 1.08614 186.782 1.0567V1.0567ZM118.269 3.52222C118.269 3.55019 118.269 3.55019 118.032 3.57962C118.269 3.57816 118.506 3.57669 118.743 3.57523C118.506 3.54872 118.506 3.54872 118.269 3.52222ZM166.624 0.677801C166.861 0.676335 166.861 0.676335 167.099 0.674869C167.099 0.674869 166.861 0.676335 166.624 0.677801ZM97.1478 0.771601C96.9107 0.773067 96.9107 0.773067 97.1478 0.771601V0.771601ZM224.734 3.03193C225.682 2.97013 226.394 2.9937 227.342 3.01581C226.631 3.02021 225.682 3.02607 224.734 3.03193ZM127.023 0.391119C127.26 0.389653 127.497 0.388187 127.735 0.414693C127.26 0.389653 127.023 0.391119 127.023 0.391119Z"
                      fill="url(#paint0_linear_720_932)"
                    />
                    <defs>
                      <linearGradient
                        id="paint0_linear_720_932"
                        x1="196.345"
                        y1="-0.373061"
                        x2="24.7083"
                        y2="95.8315"
                        gradientUnits="userSpaceOnUse"
                      >
                        <stop offset="0" stop-color="#FF307C" />
                        <stop offset="0.247843" stop-color="#A85CC5" />
                        <stop offset="1" stop-color="#3075FF" />
                      </linearGradient>
                    </defs>
                  </svg>
                </span>
              </span>
              详情
            </h3>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="tp-product-details-area pt-5">
    <div class="container">
      <div class="row">
        <div class="col-xl-6 col-lg-6" style="display: grid; place-items: center;height: 400px">
          <div class="tp-shop-details__wrapper">
            <div class="tp-shop-details__tab-content-box">
              <div class="tab-content" id="nav-tabContent" style="display: grid; place-items: center;height: 400px">
                <img src="assets/svg/{{templateInfo.categoryId}}-img.svg" alt="">
              </div>
            </div>
          </div>
        </div>

        <div class="col-xl-6 col-lg-6" style="height: 400px">
          <div class="tp-shop-details__right-warp">
            <h3 class="tp-shop-details__title-sm">{{ templateInfo.name }}</h3>
            <div class="tp-fea-product__star">
              <div class="row">
                <div class="col-3">
                  <span nz-icon nzType="star" nzTheme="outline"></span>
                  <span class="review-text">&emsp;{{ templateInfo.star }}</span>
                </div>                <div class="col-3">
                  <span nz-icon nzType="eye" nzTheme="outline"></span>
                  <span class="review-text">&emsp;200</span>
                </div>
                <div class="col-3">
                  <span nz-icon nzType="download" nzTheme="outline"></span>
                  <span class="review-text">&emsp;{{ templateInfo.download>=1000?((templateInfo.download/1000).toFixed(2)+'k'):templateInfo.download }}</span>
                </div>
              </div>
            </div>
            <div class="tp-shop-details__product-info">
              <ul>
                <li><span>类别 : </span>&emsp;{{ categoryStr }}</li>
                <li><span>标签 : </span>&emsp;MySQL</li>
                <li><span>最新版本 : </span>&emsp;{{ latestVersion?latestVersion.version:'xxx' }}</li>
                <li><span>最后更新时间 : </span>&emsp;{{ templateInfo.updateTime }}</li>
              </ul></div>
            <div class="tp-shop-details__quantity-wrap mt-4 d-flex align-items-center">
              <div class="tp-shop-details__btn me-4">
                <a class="btn-icon" href="javascript:" (click)="downloadTemplateNow()">
                  <span class="material-symbols-outlined">download</span>下载
                </a>
              </div>
              <div class="tp-shop-details__btn me-4">
                <a class="btn-icon" href="javascript:" (click)="open()">
                  <span class="material-symbols-outlined">upgrade</span>更新</a>
              </div>
              <div class="tp-shop-details__btn me-4">
                <a class="btn-icon" href="javascript:" (click)="shareVersionNow(latestVersion.id)">
                  <span class="material-symbols-outlined">share</span>分享</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="productdetails-tabs mb-5">
          <div class="row">
            <div class="col-xl-12 col-lg-12 col-12">
              <div class="product-additional-tab">
                <div class="pro-details-nav mb-5">
                  <ul class="nav nav-tabs pro-details-nav-btn" id="myTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                      <button
                        class="nav-links"
                        [ngClass]="showPage==1?'active':''"
                        id="home-tab-1"
                        data-bs-toggle="tab"
                        data-bs-target="#home-1"
                        type="button"
                        role="tab"
                        aria-controls="home-1"
                        aria-selected="true"
                        (click)="showPage = 1"
                        ><span>详情</span></button
                      >
                    </li>
                    <li class="nav-item" role="presentation">
                      <button
                        [ngClass]="showPage==2?'active':''"
                        class="nav-links"
                        id="information-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#additional-information"
                        type="button"
                        role="tab"
                        aria-controls="additional-information"
                        aria-selected="false"
                        (click)="showPage = 2"
                        ><span>历史版本</span></button
                      >
                    </li>

                    <li class="nav-item" role="presentation">
                      <button
                        [ngClass]="showPage==3?'active':''"
                        class="nav-links"
                        id="size-chart-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#chart"
                        type="button"
                        role="tab"
                        aria-controls="chart"
                        aria-selected="false"
                        (click)="showPage = 3"
                        ><span>FAQ</span></button
                      >
                    </li>
                  </ul>
                </div>
                <div class="tab-content tp-content-tab" id="myTabContent-2">
                  <div [hidden]="!(showPage == 1)" id="home-1" role="tabpanel" aria-labelledby="home-tab-1">
                    <div class="product-details-list-box">
                      <span> 概要信息 : </span>
                      <p class="mb-5">{{ templateInfo.description }}</p>
<!--                      <p class="pb-55">。。。。。</p>-->
                    </div>
                    <div class="product-details-list-box">
                      <span> 详细信息 : </span>
<!--                      <p class="mb-30">{{ templateInfo.description }}</p>-->
                      <p class="pb-5">。。。。。</p>
                    </div>
                    <div class="product-details-list-box" style="width: 100%;">
                      <span> 其他信息 : </span>
                      <ul style="width: 100%;">
                        <li>
                          <span>
                            <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path
                                d="M15.794 2.17595C14.426 3.42395 13.094 4.87595 11.798 6.53195C10.67 7.95995 9.656 9.42395 8.756 10.924C7.94 12.268 7.346 13.42 6.974 14.38C6.962 14.416 6.938 14.446 6.902 14.47C6.866 14.506 6.824 14.524 6.776 14.524C6.764 14.536 6.752 14.542 6.74 14.542C6.656 14.542 6.596 14.518 6.56 14.47L0.134 7.93595C0.122 7.92395 0.278 7.76795 0.602 7.46795C0.926 7.15595 1.244 6.87395 1.556 6.62195C1.904 6.33395 2.09 6.20195 2.114 6.22595L5.642 8.99795C6.674 7.78595 7.832 6.58595 9.116 5.39795C11.048 3.62195 13.04 2.10995 15.092 0.861953C15.128 0.861953 15.266 1.02995 15.506 1.36595L15.866 1.88795C15.878 1.93595 15.878 1.98995 15.866 2.04995C15.854 2.09795 15.83 2.13995 15.794 2.17595Z"
                                fill="currentColor"
                              ></path>
                            </svg>
                          </span>
                          <p class="mb-5">{{ templateInfo.description }}</p>
                        </li>
                        <li>
                          <span>
                            <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path
                                d="M15.794 2.17595C14.426 3.42395 13.094 4.87595 11.798 6.53195C10.67 7.95995 9.656 9.42395 8.756 10.924C7.94 12.268 7.346 13.42 6.974 14.38C6.962 14.416 6.938 14.446 6.902 14.47C6.866 14.506 6.824 14.524 6.776 14.524C6.764 14.536 6.752 14.542 6.74 14.542C6.656 14.542 6.596 14.518 6.56 14.47L0.134 7.93595C0.122 7.92395 0.278 7.76795 0.602 7.46795C0.926 7.15595 1.244 6.87395 1.556 6.62195C1.904 6.33395 2.09 6.20195 2.114 6.22595L5.642 8.99795C6.674 7.78595 7.832 6.58595 9.116 5.39795C11.048 3.62195 13.04 2.10995 15.092 0.861953C15.128 0.861953 15.266 1.02995 15.506 1.36595L15.866 1.88795C15.878 1.93595 15.878 1.98995 15.866 2.04995C15.854 2.09795 15.83 2.13995 15.794 2.17595Z"
                                fill="currentColor"
                              ></path>
                            </svg>
                          </span>
                          <p class="mb-5">{{ templateInfo.description }}</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div [hidden]="!(showPage == 2)" id="additional-information" role="tabpanel" aria-labelledby="information-tab">
                    <div class="container">
                      <div class="product__details-info table-responsive">
                        <table class="table table-striped">
                          <tbody>
                          <tr>
                            <td class="add-info">版本号</td>
                            <td class="add-info-list">概要</td>
                            <td class="add-info-list">更新时间</td>
                            <td class="add-info-list">下载量</td>
                            <td class="add-info-list">下载</td>
                            <td class="add-info-list">分享链接</td>
                          </tr>
                          <tr *ngFor="let item of versionList; let i = index">
                            <td class="add-info">{{ item.version }}</td>
                            <td class="add-info-list"> {{ item.description }}</td>
                            <td class="add-info-list"> {{ item.createTime }}</td>
                            <td class="add-info-list"> {{ item.download>=1000?((item.download/1000).toFixed(2)+'k'):item.download }}</td>
                            <td class="add-info-list">
                              <a href="javascript:" (click)="downloadVersion(item.version,item.id)"> <span class="material-symbols-outlined">download</span></a
                              ></td>
                            <td class="add-info-list">
                              <a href="javascript:" (click)="shareVersionNow(item.id)"><span class="material-symbols-outlined">share</span></a
                              ></td>
                          </tr>
                          </tbody>
                        </table>
                      </div>
                      <div class="d-flex justify-content-center">
                        <nz-pagination [nzPageIndex]="pageIndex+1" [nzTotal]="totalElements" nzShowSizeChanger
                        [(nzPageSize)]="pageSize" (nzPageSizeChange)="pageSizeChange($event)" (nzPageIndexChange)="pageIndexChange($event)"
                                       [nzPageSizeOptions]=pageSizeOptions ></nz-pagination>
                      </div>
                    </div>
                  </div>
                  <div [hidden]="!(showPage == 3)" id="chart" role="tabpanel" aria-labelledby="size-chart-tab">
                    <div class="tp-service-details-faq tp-faq-inner__customize">
                      <div class="tp-custom-accordion">
                        <div class="accordion" id="accordionExample">
                          <div class="accordion-items tp-faq-active">
                            <h2 class="accordion-header" id="headingOne">
                              <button
                                class="accordion-buttons"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapseOne"
                                aria-expanded="true"
                                aria-controls="collapseOne"
                              >
                                这个模版怎么用?
                              </button>
                            </h2>
                            <div
                              id="collapseOne"
                              class="accordion-collapse collapse show"
                              aria-labelledby="headingOne"
                              data-bs-parent="#accordionExample"
                            >
                              <div class="accordion-body"> 就这么用 </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<!--  <button nz-button nzType="primary" (click)="open()">Create</button>-->
  <nz-drawer
    [nzBodyStyle]="{ overflow: 'auto' }"
    [nzMaskClosable]="false"
    [nzWidth]="720"
    [nzVisible]="visible"
    nzTitle="上传新版本"
    [nzFooter]="footerTpl"
    (nzOnClose)="close()"
  >
    <form nz-form *nzDrawerContent>
      <nz-form-item>
        <nz-form-label [nzSpan]="5">版本号</nz-form-label>
        <nz-form-control [nzSpan]="24" [nzValidateStatus]="error">
          <input nz-input [(ngModel)]="newTemplateInfo.currentVersion" name="currentVersion" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="5">版本描述</nz-form-label>
        <nz-form-control
          [nzSpan]="24"
        >
                        <textarea nz-input placeholder="请对该模版进行简单描述" [nzAutosize]="{ minRows: 3, maxRows: 5 }"
                                  [(ngModel)]="newTemplateInfo.descriptionVersion" name="descriptionVersion"></textarea>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="5">版本文件</nz-form-label>
        <nz-form-control [nzSpan]="24">
          <nz-upload
            nzType="drag"
            nzAccept=".yml"
            [nzAction]="''"
            [nzLimit]="1"
            [nzMultiple]="true"
            [(nzFileList)]="fileList"
            (nzChange)="handleChange($event)"
            [nzBeforeUpload]="beforeUpload"
          >
            <p class="ant-upload-drag-icon">
              <span nz-icon nzType="inbox"></span>
            </p>
            <p class="ant-upload-text">点击该区域上传文件</p>
          </nz-upload>
        </nz-form-control>
      </nz-form-item>
    </form>

    <ng-template #footerTpl>
      <div style="float: right">
        <button nz-button style="margin-right: 8px;" (click)="close()">取消</button>
        <button nz-button nzType="primary" (click)="updateTemplate()">提交</button>
      </div>
    </ng-template>
  </nz-drawer>
</main>
